<template>
  <div class="container">
    <van-sticky>
      <div class="search-box">
        <van-search
          :value='keyword'
          placeholder="点击输入搜索内容"
          use-action-slot
          shape="round"
          @change="onChangeVal"
          @search="onSearch"
          :autofocus="true"
          ref="searchBox"
        >
          <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div>
        </van-search>
      </div>
    </van-sticky>
    <div class="main" v-if="!nodata">
      <goods-block :dataList="lowerGoodsList" blockType="0" custom-style="margin-bottom: 10px" @onUpdateShelfFlag="onUpdateShelfFlag('lowerGoodsList', $event)"></goods-block>
      <goods-block :dataList="upperGoodsList" blockType="1" custom-style="margin-bottom: 10px" @onUpdateShelfFlag="onUpdateShelfFlag('upperGoodsList', $event)"></goods-block>
      <goods-block :dataList="sellOutGoodsList" blockType="2" custom-style="margin-bottom: 10px"></goods-block>
      <goods-block :dataList="invalidGoodsList" blockType="3" @clearInvalidBlock="clearInvalidBlock"></goods-block>
    </div>
    <div class="nodata" v-else>
      <div class="align-c" style="padding-top: 120px;">
        <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
        <div class="align-c mar-t-5 font-16 font-color-6">
          暂时没有您搜索的内容~
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GoodsBlock from '../component/goods-block/index'
import { pagingGoodsSelection, updateShelfFlag } from '@/api/personal'
export default {
  components: { GoodsBlock },
  data() {
    return {
      keyword: '',
      lowerGoodsList: [],
      upperGoodsList: [],
      sellOutGoodsList: [],
      invalidGoodsList: [],
      paddingParams: {
        memberId: '',
        enterpriseId: '',
        title: '',
        oneCategoryId: '',
        upperShelfFlag: '',
        showHomePage: '',
        size: 10,
        currentPage: 1
      },
      recordsCount: 0,
      pullLoad: {
        finished: false,
        loading: false
      },
      nodata: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.paddingParams.memberId = this.getCustomerId
    this.paddingParams.enterpriseId = this.getEnterpriseId
    // 判断从详情页返回的数据状态是否发生更改
    const pages = getCurrentPages() // eslint-disable-line
    let curPage = pages[pages.length - 1]
    let goods = curPage.data.goods
    if (goods) {
      let arrayName = ''
      switch (goods.blockType) {
        case '0':
          arrayName = 'lowerGoodsList'
          break
        case '1':
          arrayName = 'upperGoodsList'
          break
        case '2':
          arrayName = 'sellOutGoodsList'
          break
        case '3':
          arrayName = 'invalidGoodsList'
          break
        default:
          break
      }
      let index = this[arrayName].findIndex(item => item.goodsId === goods.goodsId)
      goods.mainImage = this[arrayName][index].mainImage
      this[arrayName].splice(index, 1, goods)
      console.log(this[arrayName][index])
      curPage.setData({ goods: null })
    }
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pagingGoodsSelection()
    }
  },
  methods: {
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.keyword = e.mp.detail
      this.paddingParams.title = this.keyword
      this.resetData()
      this.pagingGoodsSelection()
    },
    onSearch2(e) {
      // 触发搜索事件
      this.paddingParams.title = this.keyword
      this.resetData()
      this.pagingGoodsSelection()
    },
    onChangeVal(e) {
      this.keyword = e.mp.detail
    },
    resetData() {
      this.paddingParams.currentPage = 1
      this.recordsCount = 0
      this.lowerGoodsList = []
      this.upperGoodsList = []
      this.sellOutGoodsList = []
      this.invalidGoodsList = []
      this.pullLoad.finished = false
    },
    pagingGoodsSelection() {
      // 获取商品数据列表
      pagingGoodsSelection(this.paddingParams).then(response => {
        if (response.isError) return
        let list = response.data.records
        list.forEach(element => {
          this.recordsCount++
          switch (element.upperShelfFlag) {
            case 0:
              this.lowerGoodsList.push(element)
              break
            case 1:
              this.upperGoodsList.push(element)
              break
            case 2:
              this.sellOutGoodsList.push(element)
              break
            case 3:
              this.invalidGoodsList.push(element)
              break
            default:
              break
          }
        })
        if (this.paddingParams.currentPage === 1) {
          if (this.upperGoodsList.length > 0 || this.lowerGoodsList.length > 0 || this.sellOutGoodsList.length > 0 || this.invalidGoodsList.length > 0) {
            this.nodata = false
          } else {
            this.nodata = true
          }
        }
        this.paddingParams.currentPage++
        if (this.recordsCount >= response.data.total || this.recordsCount === 0) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    updateShelfFlag(arrayName, goodsId, upperShelfFlag) {
      // 商品上下架
      let params = {
        memberId: this.getCustomerId,
        upperShelfFlag: upperShelfFlag,
        goodsId: goodsId
      }
      updateShelfFlag(params).then(response => {
        if (response.isError) return
        this.$utils.showToast({
          title: upperShelfFlag === 1 ? '上架成功' : '下架成功'
        })
        let index = this[arrayName].findIndex(item => item.goodsId === goodsId)
        this[arrayName][index].upperShelfFlag = upperShelfFlag
        if (upperShelfFlag === 0) {
          this[arrayName][index].showHomePage = 0
          this.$delete(this[arrayName][index], 'showHomePage')
          this.$set(this[arrayName][index], 'showHomePage', 0)
        }
        this.$delete(this[arrayName][index], 'upperShelfFlag')
        this.$set(this[arrayName][index], 'upperShelfFlag', upperShelfFlag)
      }).catch(() => {
      })
    },
    onUpdateShelfFlag(arrayName, ev) {
      if (ev.mp.details.upperShelfFlag === 0) {
        this.$pt.showModal({
          content: '下架商品后将对顾客隐藏该商品',
          confirmText: '确认下架',
          confirmColor: '#333',
          success: (res) => {
            if (res.confirm) {
              this.updateShelfFlag(arrayName, ev.mp.details.goodsId, ev.mp.details.upperShelfFlag)
            }
          }
        })
      } else {
        this.updateShelfFlag(arrayName, ev.mp.details.goodsId, ev.mp.details.upperShelfFlag)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search-box {
  background: white;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
</style>
